<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title th:text="${bed.id == null} ? '添加病床' : '编辑病床'">病床信息管理</title>
  <!-- 引入Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 引入Font Awesome图标 -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    /* 自定义样式 */
    :root {
      --primary: #3b82f6;
      --accent: #2563eb;
    }
    .bg-neutral {
      background-color: #f3f4f6;
    }
    .card-shadow {
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    }
    .input-focus {
      transition: border-color 0.2s ease;
    }
    .input-focus:focus {
      border-color: var(--primary);
      outline: none;
      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
    }
    .btn {
      display: inline-flex;
      align-items: center;
      padding: 0.75rem 1.5rem;
      border-radius: 0.375rem;
      transition: background-color 0.2s ease;
    }
    .btn-primary {
      background-color: var(--primary);
      color: white;
    }
    .btn-primary:hover {
      background-color: var(--accent);
    }
    .btn-gray {
      background-color: #e5e7eb;
      color: #4b5563;
    }
    .btn-gray:hover {
      background-color: #d1d5db;
    }
  </style>
</head>
<body class="bg-neutral min-h-screen">
<div class="container mx-auto px-4 py-8 max-w-4xl">
  <!-- 页面标题区域 -->
  <div class="mb-8">
    <h1 class="text-3xl font-bold text-gray-800 mb-2">
      <i class="fas fa-bed text-primary mr-3 text-xl"></i>
      <span th:text="${bed.id == null} ? '添加病床' : '编辑病床'"></span>
    </h1>
    <p class="text-gray-600">管理病床基本信息</p>
  </div>

  <!-- 表单卡片 -->
  <div class="bg-white rounded-2xl card-shadow p-6 md:p-8">
    <form th:action="@{/admin/bed/save}" method="post" class="space-y-6">
      <input type="hidden" name="id" th:value="${bed.id}" />

      <!-- 基本信息分组 -->
      <div>
        <h3 class="text-lg font-semibold text-gray-700 mb-4 flex items-center">
          <i class="fas fa-bed text-primary mr-2"></i>基本信息
        </h3>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <label for="roomNumber" class="block text-sm font-medium text-gray-700 mb-1">
              <i class="fas fa-hotel text-primary mr-1"></i>病房号 <span class="text-red-500">*</span>
            </label>
            <input type="text" name="roomNumber" id="roomNumber" th:value="${bed.roomNumber}"
                   class="w-full px-4 py-3 border border-gray-300 rounded-lg input-focus"
                   placeholder="请输入病房号" required>
          </div>
          <div>
            <label for="bedNumber" class="block text-sm font-medium text-gray-700 mb-1">
              <i class="fas fa-bed text-primary mr-1"></i>床位号 <span class="text-red-500">*</span>
            </label>
            <input type="text" name="bedNumber" id="bedNumber" th:value="${bed.bedNumber}"
                   class="w-full px-4 py-3 border border-gray-300 rounded-lg input-focus"
                   placeholder="请输入床位号" required>
          </div>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <label for="status" class="block text-sm font-medium text-gray-700 mb-1">
              <i class="fas fa-info-circle text-primary mr-1"></i>状态 <span class="text-red-500">*</span>
            </label>
            <select name="status" id="status"
                    class="w-full px-4 py-3 border border-gray-300 rounded-lg input-focus appearance-none bg-white"
                    required>
              <option value="空闲" th:selected="${bed.status == '空闲'}">空闲</option>
              <option value="占用" th:selected="${bed.status == '占用'}">占用</option>
              <option value="维修中" th:selected="${bed.status == '维修中'}">维修中</option>
            </select>
            <div class="absolute mt-10 ml-3 pointer-events-none text-gray-400">
              <i class="fas fa-chevron-down"></i>
            </div>
          </div>
          <div>
            <label for="patientId" class="block text-sm font-medium text-gray-700 mb-1">
              <i class="fas fa-user text-primary mr-1"></i>患者ID
            </label>
            <input type="number" name="patientId" id="patientId" th:value="${bed.patientId}"
                   class="w-full px-4 py-3 border border-gray-300 rounded-lg input-focus"
                   placeholder="请输入患者ID">
          </div>
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="flex flex-col sm:flex-row justify-end gap-4 pt-4 border-t border-gray-100">
        <a href="/admin/bed/list" class="btn btn-gray">
          <i class="fas fa-times mr-2"></i>取消
        </a>
        <button type="submit" class="btn btn-primary">
          <i class="fas fa-save mr-2"></i>保存信息
        </button>
      </div>
    </form>
  </div>
</div>
</body>
</html>